<template>
    <div>
        <el-select
            v-model="select_value"
            filterable
            clearable
            placeholder="请选择"
            @change="subData"
        >
            <el-option
                v-for="item in selectList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
            >
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: 'select_tree',
    data () {
        return {
            select_value: 0,
            selectList: []
        }
    },
    methods: {
        subData () {
            this.$emit('subSelectData', this.select_value)
        },
        subValue (data) {
            this.select_value = data
        },
        setSelectData (data) {
            if (data !== null) {
                this.selectList.push({ id: 0, title: '请选择' })
                data.forEach(item => {
                    this.getStrLen(item, 1)
                })
            }
        },
        getStrLen (data, num) {
            var baseString = ''
            var curnum = num
            while (curnum > 1) {
                baseString += '\xa0\xa0\xa0\xa0'
                curnum--
            }
            baseString += '|---'
            data.title = baseString + data.title
            this.selectList.push(data)
            if (data.children.length > 0) {
                ++num
                data.children.forEach(items => {
                    this.getStrLen(items, num)
                })
            }
        }
    }
}
</script>

<style>
</style>
